<template>
	<view class="selectObject">
		<view class="search-box">
			<icon class="icon" type="search" size="20"></icon>
			<input v-model="search" class="text" placeholder="请输入名字查询" type="text"  />
		</view>
		<view class="selectObject-list">
			<!-- 一级部门 -->
			<view v-for="item,index in informList" :key="item.id">
				<view class="selectObject-list-item">
					<view class="selectObject-list-item-department">
						<image src="@/static/image/order/department_icon.png"></image>
						<view class="selectObject-list-item-department-name">
							{{item.templateName}}
						</view>
					</view>
					<view v-if="!item.unfold" class="selectObject-list-item-unfold" @click="unfoldClick('true',item)">展开模板</view>
					<view v-else class="selectObject-list-item-unfold" @click="unfoldClick('false',item)" style="color:#a3a3a3;">收起模板</view>
					<view class="selectObject-list-item-icon">
						<icon v-if="!item.select" @click="checkSection('true',item)" type="success_no_circle" size="35" color='#eaeaea'/>
						<icon v-else @click="checkSection('false',item)" type="success_no_circle" size="35"/>
					</view>
				</view>
				<!-- 二级人员 -->
				<view v-for="val,idx in item.noticeObjDTOS" :key="val.objId" v-if="item.unfold" class="selectObject-list-item" style="margin: 15rpx 50rpx;padding: 15rpx 25rpx;">
					<view class="selectObject-list-item-department">
						<image src="@/static/image/order/staff_icon.png" style="border-radius:35rpx"></image>
						<view class="selectObject-list-item-department-name">
							{{val.objName}}
						</view>
					</view>
					<view class="selectObject-list-item-icon">
						<icon v-if="!item.select" type="success_no_circle" size="35" color='#eaeaea' />
						<icon v-else type="success_no_circle" size="35" />
					</view>
				</view>
			</view>
		</view>
		
		<view class="confirmBox">
			<button type="primary" @click="confirm" class="btn">确定</button>
		</view>
	</view>
</template>

<script>
	import * as api from '@/utils/api.js';
	export default {
		data() {
			return {
				isUnfold:false,
				isCheck:false,
				search:"",
				informList:[],
				selectData:{},
				flg:false
			}
		},
		onLoad(){
			this.getInit()
		},
		watch: {
			// 搜索框防抖
			search(newVal){
				if (this.flg) {
				  return false
				}
				this.flg = true
				setTimeout(()=> {
					this.getInit()
				  this.flg = false
				}, 1000)
			}
		},
		methods:{
			getInit(){
				api.getObjectList({search:this.search}).then(res=>{
					if(res.code==0){
						let { result } = res.data
						result.forEach(item=>{
							item.select = false
							item.unfold = false
						})
						this.informList = result
					}
				})
			},
			unfoldClick(type,item){
				if(type == 'true'){
					item.unfold = true
				}else{
					item.unfold = false
				}
			},
			checkSection(type,item){
				if(type == 'true'){
					this.informList.forEach(item=>{
						item.select = false
					})
					item.select = true
					this.selectData = item
					if(!item.unfold){
						item.unfold = true
					}
				}else{
					item.select = false
					this.selectData = {}
				}
			},
			confirm(){
				let pages = getCurrentPages()
				let prePage = pages[pages.length - 2]
				prePage.setData({departmentList:this.selectData})
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="scss" scoped>
.selectObject{
	min-height: 100vh;
	padding: 20rpx 20rpx 100rpx 20rpx;
	background-color: #eaeaea;
		.search-box {
			display: flex;
			background-color: white;
			margin-bottom: 25rpx;
			border-radius: 16rpx;
			overflow: hidden;
			-moz-box-shadow: -1rpx 1rpx 15rpx #333333;
			-webkit-box-shadow: -1rpx 1rpx 15rpx #333333;
			box-shadow: -1rpx 1rpx 15rpx #333333;
	
			.icon {
				padding: 16rpx;
			}
	
			.text {
				flex: 1;
				height: 70rpx;
			}
		}

		&-list{
			margin-top: 10rpx;
			&-item{
				margin-bottom: 20rpx;
				padding: 18rpx 15rpx;
				border-radius: 12rpx;
				background-color: #fff;
				display: flex;
				align-items: center;
				justify-content: space-between;
				&-department{
					display: flex;
					align-items: center;
					image{
						width: 70rpx;
						height: 70rpx;
						margin-right: 20rpx;
					}
					&-name{
						min-width: 240rpx;
						font-size: 36rpx;
						font-weight: 700;
					}
				}
				&-unfold{
					font-size: 36rpx;
					color: #887bd7;
				}
				&-icon{
					// width: 30rpx;
					// height: 30rpx;
				}
			}
		}
		.confirmBox{
			width: 100%;
			position: fixed;
			bottom: 0;
			left: 0;
			.btn{
				margin:20rpx;
				color: #fff;
				background-color: #1793c6;
			}
		}
}
	


</style>
